<script setup>
import { onMounted, reactive, ref, watch,shallowRef } from 'vue';
import * as echarts from 'echarts';
import { useEcharts } from '../../stores/echartsStore'
import { storeToRefs } from 'pinia'

const store = useEcharts()
const { xList,series } = storeToRefs(store)

let myChart = shallowRef()

const options = reactive({
        xAxis: {
            name:'星期',
            data: []
        },
        yAxis: {
            name:"销量"
        },
        // 浮层, 鼠标移动时, 用来显示数据
        tooltip: {},
        series: [
            {
                data: [],
                type: 'scatter'
            }
        ]
    })

onMounted(() => {

    

    store.handleEcharts()

    myChart = echarts.init(document.querySelector('#histogram'),'dark');

    options.xAxis.data = xList
    options.series[0].data = series

    window.onresize = () => {
        // 自适应大小
        myChart.resize()
    }
})

// 监听
watch(options,(newOptions) => {
    myChart.showLoading()
    myChart.setOption(newOptions)
    myChart.hideLoading()
})

</script>

<template>
    <div id="histogram"></div>
</template>

<style scoped>
#histogram {
    width: 60%;
    height: 80%;
}
</style>